<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item label='分类' name='category' :rules="[{required : true, message : '请选择分类'}]">
                <a-tree-select show-search v-model:value='formData.category' :tree-data='categoryOptions' :field-names='{children : "children", label : "name", value : "id"}'></a-tree-select>
        </a-form-item>
        <a-form-item label='execel表' name='file'>
            <a-upload :max-count="1" v-model:file-list='fileList' accept="xls,.xlsx" :beforeUpload='beforeUpload'>
                <template v-if='fileList.length == 0'>
                    <a-button><UploadOutlined />请选择execel表</a-button>
                </template>
            </a-upload>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { optionsApi } from '@/api/apps/Category';
    import { appTypeApi, importAppsApi, linkTypepeApi, saveApi, uploadApi } from '@/api/Apps';
        import { UploadOutlined } from '@ant-design/icons-vue';
        import { nextTick, ref } from 'vue';
import { recursionFn } from '@/utils';


    const props = defineProps<{
        row? : any;
        category? : number
    }>()

    const fileList = ref<any[]>([])

    const formRef = ref()

    
    
    const formData = ref<any>({
        category : '',
        file : ''
    })

    


    async function submit() {
        let params  = await formRef.value.validate()
        

        if(!params.file) {
            return
        }


        return importAppsApi(params.file, params.category)
    }

    //分类
    const categoryOptions = ref<any[]>([])


    function beforeUpload(file:File, field:FormField) {
        formData.value.file = file
        return false
    }

    optionsApi().then(res => {
        if(res.data) {
            categoryOptions.value.push(...recursionFn(res.data, Math.min(...res.data.map(r => r.parentId)), 'id', 'parentId', 'children'))
        }
    })

    defineExpose({
        submit
    })
</script>